<template>
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="phone-verify-dialog">
			<view class="dialog-content">
				<view class="close-btn" @click="handleClose">
					<text class="iconfont icon-a-guanbiicon"></text>
				</view>
				<view class="dialog-title">验证手机号</view>
				<view class="dialog-desc">请先绑定手机号码，即可快速查看</view>
				<view class="form-item">
					<view class="country-code" @click="showCountryCodeList = true">
						+{{countryCode}} <text class="iconfont icon-arrow-down"></text>
					</view>
					<input type="number" placeholder="请输入手机号" v-model="phone" class="phone-input" maxlength="11" />
				</view>
				<view class="form-item verify-item">
					<input type="number" placeholder="输入验证码" v-model="verifyCode" class="verify-input" maxlength="6" />
					<view :class="['verify-btn', sendingDisabled ? 'disabled' : '']" @click="sendVerifyCode">
						{{verifyBtnText}}
					</view>
				</view>
				<view class="submit-btn" @click="submitVerify">验证</view>
			</view>
			<!-- <view class="dialog-footer">
				<view @click="handleClose" class="iconfont icon-a-guanbiicon"></view>
			</view> -->
		</view>
	</uni-popup>
</template>

<script>
	import { getBindPhoneVerifyCodeApi, verifyBindPhoneApi } from '@/api/user.js'
	import { showToast } from '@/util/util.js'
	
	export default {
		name: 'PhoneVerifyDialog',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.$refs.popup.open()
				} else {
					this.$refs.popup.close()
				}
			}
		},
		data() {
			return {
				countryCode: '86',
				showCountryCodeList: false,
				phone: '',
				verifyCode: '',
				countdown: 60,
				timer: null,
				sendingDisabled: false,
				verifying: false
			}
		},
		computed: {
			verifyBtnText() {
				return this.sendingDisabled ? `${this.countdown}s` : '获取验证码';
			}
		},
		methods: {
			handleClose() {
				this.$emit('update:show', false)
				this.resetForm()
			},
			resetForm() {
				this.phone = ''
				this.verifyCode = ''
				this.clearCountdown()
			},
			clearCountdown() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.countdown = 60
				this.sendingDisabled = false
			},
			startCountdown() {
				this.sendingDisabled = true
				this.countdown = 60
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						this.clearCountdown()
					}
				}, 1000)
			},
			validatePhone() {
				const phoneReg = /^1[3-9]\d{9}$/
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				return true
			},
			sendVerifyCode() {
				if (this.sendingDisabled) return
				
				if (!this.validatePhone()) return
				
				getBindPhoneVerifyCodeApi({
					phone: this.phone
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '验证码发送成功',
						icon: 'none',
						duration: 2000
					})
					this.startCountdown()
				})
			},
			submitVerify() {
				if (!this.validatePhone()) return
				
				if (!this.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				if (this.verifyCode.length !== 6) {
					uni.showToast({
						title: '请输入6位验证码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				if (this.verifying) return
				this.verifying = true
				
				uni.showLoading({
					title: '验证中',
					mask: true
				})
				
				verifyBindPhoneApi({
					phone: this.phone,
					code: this.verifyCode
				}).then(res => {
					uni.hideLoading()
					this.verifying = false
					
					
						uni.showToast({
							title: '手机号绑定成功',
							icon: 'success',
							duration: 2000
						})
						this.handleClose()
						this.$emit('success')
					
				})
			}
		},
		beforeDestroy() {
			this.clearCountdown()
		}
	}
</script>

<style lang="scss">
	.phone-verify-dialog {
		background: #fff;
		width: calc(100vw - 60rpx);
		border-radius: 20rpx;
		position: relative;
		
		.close-btn {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 64rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
			
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 44rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.05);
				border-radius: 50%;
				transition: all 0.2s ease;
			}
			
			&:active::after {
				width: 56rpx;
				height: 56rpx;
				background: rgba(0, 0, 0, 0.1);
			}
			
			.iconfont {
				font-size: 36rpx;
				color: #666;
				position: relative;
				z-index: 2;
			}
		}
		
		.dialog-content {
			width: 100%;
			padding: 40rpx 30rpx;
			display: flex;
			flex-direction: column;
			
			.dialog-title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 16rpx;
			}
			
			.dialog-desc {
				font-size: 28rpx;
				color: #767676;
				text-align: center;
				margin-bottom: 40rpx;
			}
			
			.form-item {
				display: flex;
				align-items: center;
				background-color: #f7f6f9;
				height: 100rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
				
				.country-code {
					font-size: 28rpx;
					color: #333;
					display: flex;
					align-items: center;
					margin-right: 20rpx;
					
					.iconfont {
						font-size: 24rpx;
						margin-left: 6rpx;
					}
				}
				
				.phone-input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
				}
			}
			
			.verify-item {
				.verify-input {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
				}
				
				.verify-btn {
					width: 200rpx;
					height: 70rpx;
					background-color: #3175ff;
					color: #fff;
					font-size: 26rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.disabled {
						background-color: #c0c4cc;
					}
				}
			}
			
			.submit-btn {
				width: 100%;
				height: 90rpx;
				background-color: #3175ff;
				color: #fff;
				font-size: 32rpx;
				border-radius: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
			}
		}
		
		.dialog-footer {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx auto;
			
			.iconfont {
				color: #333;
				font-size: 54rpx;
			}
		}
	}
</style>